/*
  学习目标：生命周期-卸载阶段
  1. componentWillUnMount
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    isShow: true,
  };

  render() {
    const { isShow } = this.state;
    return <div>{isShow && <Child></Child>}</div>;
  }
}

class Child extends React.Component {
  // 类似: vue中的beforeDestroy,
  // 场景: 做清除的动作, 如: 关闭定时器, 解绑事件

  resizeFn = () => {
    console.log('窗口改变了  ----->  ');
  };

  componentDidMount() {
    window.addEventListener('resize', this.resizeFn);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFn);
    console.log('我要被卸载了  ----->  ');
  }

  render() {
    return <div>Child</div>;
  }
}
